<template>
    <view>
        <view class="home_search_nav">
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="home_nav_content">
                <image class="home_logo" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/logo.png" @click="copyToken"></image>
            </view>
            <view class="home_search_view" @click="goSearch">
                <image
                    style="margin-left: 30rpx; height: 40rpx; width: 40rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png"
                ></image>
                <label style="margin-left: 8rpx; color: #2d3130; font-size: 28rpx; opacity: 0.5"
                    >搜索食品/话题/动态/用户</label
                >
            </view>
        </view>
        <view>
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="uni_navbar__placeholder_view" />
        </view>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
    name: 'home-search-nav',
    data() {
        return {
            statusBarHeight: statusBarHeight,
        };
    },
    methods: {
        goSearch() {
            this.$emit('goSearch');
        },
        copyToken() {
            if (process.env.NODE_ENV === 'development') {
                uni.setClipboardData({
                    data: uni.getStorageSync('Token'),
                    success() {
                        uni.showToast({ title: 'token 已复制，测试专用', icon: 'none' });
                    },
                });
            }
        },
    },
};
</script>

<style>
.home_search_nav {
    position: fixed;
    background-color: #f6f6f6;
    width: 100%;
    z-index: 998;
}
.status_bar {
    height: 20px;
    width: 100%;
}
.home_nav_content {
    height: 88rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.home_logo {
    margin-left: 30rpx;
    margin-top: 28rpx;
    width: 132rpx;
    height: 48rpx;
}
.home_search_view {
    margin-top: 20rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    height: 88rpx;
    width: calc(100% - 60rpx);
    background-color: #f3f7f6;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #234941;
}
/* 	//为了站位 */
.uni_navbar__placeholder_view {
    height: 196rpx;
}
</style>
